<script lang="ts" setup>
  import { UserOutlined, DownOutlined } from '@ant-design/icons-vue';
  import Button from '@sscd/button';
  import Menu from '@sscd/menu';
  import type { MenuProps } from '@sscd/menu';
  import Dropdown from '@sscd/dropdown';
  const handleButtonClick = (e: Event) => console.log('click left button', e);
  const handleMenuClick: MenuProps['onClick'] = (e) => console.log('click', e);
</script>

<template>
  <div class="demo">
    <div class="demo-title">带下拉框的按钮</div>
    <div class="demo-content">
      <Dropdown.Button @click="handleButtonClick">
        Dropdown
        <template #overlay>
          <Menu @click="handleMenuClick">
            <Menu.Item key="1">
              <UserOutlined />
              1st menu item
            </Menu.Item>
            <Menu.Item key="2">
              <UserOutlined />
              2nd menu item
            </Menu.Item>
            <Menu.Item key="3">
              <UserOutlined />
              3rd item
            </Menu.Item>
          </Menu>
        </template>
      </Dropdown.Button>
      <Dropdown.Button>
        Dropdown
        <template #overlay>
          <Menu @click="handleMenuClick">
            <Menu.Item key="1">
              <UserOutlined />
              1st menu item
            </Menu.Item>
            <Menu.Item key="2">
              <UserOutlined />
              2nd menu item
            </Menu.Item>
            <Menu.Item key="3">
              <UserOutlined />
              3rd item
            </Menu.Item>
          </Menu>
        </template>
        <template #icon><UserOutlined /></template>
      </Dropdown.Button>
      <Dropdown.Button disabled @click="handleButtonClick">
        Dropdown
        <template #overlay>
          <Menu @click="handleMenuClick">
            <Menu.Item key="1">
              <UserOutlined />
              1st menu item
            </Menu.Item>
            <Menu.Item key="2">
              <UserOutlined />
              2nd menu item
            </Menu.Item>
            <Menu.Item key="3">
              <UserOutlined />
              3rd item
            </Menu.Item>
          </Menu>
        </template>
      </Dropdown.Button>
      <Dropdown>
        <template #overlay>
          <Menu @click="handleMenuClick">
            <Menu.Item key="1">
              <UserOutlined />
              1st menu item
            </Menu.Item>
            <Menu.Item key="2">
              <UserOutlined />
              2nd menu item
            </Menu.Item>
            <Menu.Item key="3">
              <UserOutlined />
              3rd item
            </Menu.Item>
          </Menu>
        </template>
        <Button>
          Button
          <DownOutlined />
        </Button>
      </Dropdown>
    </div>
  </div>
</template>

<style lang="less" scoped>
  .demo {
    :deep(.ant-dropdown-button) {
      margin-right: 8px;
      margin-bottom: 8px;
    }
  }
</style>
